<template>
  <div class="popup flex-center flex-align-items-center">
    <div class="main">
      <div class="main-header">
        <p>上传附件</p>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>
      <div class="content">
        <el-upload v-model:file-list="files" :auto-upload="false" :limit="10"
          class="upload flex flex-align-items-center flex-wrap" :on-change="uploadHandle">
          <p class="upload-btn font-14 flex flex-align-items-center"><i class="iconfont icon-shangchuan1"></i>请选择文件</p>
          <template #tip>
            <div class="upload-tip font-14">
              * 文件总大小上限为200MB且文件数量不能超过10个
            </div>
          </template>
          <template #file="{ file }">
            <div class="file-item flex-between flex-align-items-center">
              <p class="font-14">{{ file.name }}</p>
              <i class="iconfont icon-shanchu pointer" @click="delFile(file)"></i>
            </div>
          </template>
        </el-upload>
        <div class="content-foot flex-between flex-align-items-center">
          <div class="font-14">
            * 添加文件总大小剩余<span class="font-14">200MB</span>，且文件剩余数量为<span class="font-14">10</span>个
          </div>
          <p class="pointer font-14">上传</p>
        </div>
      </div>
    </div>
  </div>
</template> 
<script setup>
import { defineEmits, defineProps, ref } from 'vue';
import api from '@/api/index';
import { ElMessage, ElLoading } from 'element-plus';

const props = defineProps(['list']);
const emit = defineEmits(['change', 'close']);

const files = ref([
  ...props.list
]);

const uploadHandle = e => {
  if (files.value.length > 9) {
    ElMessage.error('文件数量不能超过10个');
    return
  }
  if (e.size > 200 * 1024 * 1024) {
    ElMessage.error('文件大小不大于200MB');
    return
  }
  let formData = new FormData();
  formData.append('file', e.raw);
  formData.append('type', 1);
  const loadingInstance = ElLoading.service({
    fullscreen: false,
    text: '上传中...'
  });
  api.base.uploadFile(formData).then(res => {
    files.value[files.value.length - 1] = {
      url: res.fullPath,
      name: res.name
    };
    loadingInstance.close();
  }).catch(() => {
    loadingInstance.close();
  });
}
const delFile = e => {
  console.log(e)
}
const handleClick = e => {
  emit('change', e)
}
const close = e => {
  emit('close', e)
}
</script>

<style lang="less" scoped>
.main {
  position: relative;
  width: 550px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.content {
  padding: 15px 20px 20px;

  .upload {
    .upload-btn {
      border-radius: 5px;
      padding: 8px 15px;
      background: @main-color;
      color: #fff;

      i {
        color: #fff;
        font-size: 18px;
        margin-right: 4px;
      }
    }

    .upload-tip {
      color: @main-color;
      margin-left: 8px;
    }

    &::v-deep {
      .el-upload-list {
        width: 100%;
        padding: 20px 10px 0;
        border: 1px solid #ccc;
        border-radius: 3px;
        min-height: 355px;
      }
    }

    .file-item {
      margin-bottom: 20px;

      p,
      i {
        color: #666;
      }
    }
  }

  .content-foot {
    padding-top: 16px;

    div {
      color: #999;

      span {
        color: @main-color;
      }
    }

    p {
      width: 80px;
      height: 30px;
      border-radius: 2px;
      text-align: center;
      line-height: 30px;
      background: @main-color;
      color: #fff;
    }
  }
}
</style>